<template>
  <div id="findpwd">
    <c-title :hide="false" text="忘记密码"></c-title>
    <!--<img style='width:20%;height:40px;position:absolute;display:block;left:74%;top:8rem;z-index:999' :src="imgcode" @click='getimgdata' v-if='imgcode'>-->
    <!-- 新页面 -->
    <div id="content">
      <div class="top">
        <ul class="area_number">
          <li class="selectBox" v-if="email_register">
            <van-radio-group v-model="radio" direction="horizontal" icon-size="15px">
              <van-radio name="0" :checked-color="subjectColor">手机号</van-radio>
              <van-radio name="1" :checked-color="subjectColor">邮箱</van-radio>
            </van-radio-group>
          </li>
          <li v-if="country_code == 1 && is_enable == 0">
            <van-field label="国家区号" required v-model="form.country" placeholder="+86" type="number"  maxlength="5" />
          </li>
        </ul>
        <ul class="login_info">
          <li v-if="is_enable == 0">
            <van-field v-model.trim="form.mobile" :type="radio == '1'?'text':'number'" clearable :placeholder="radio == '1'?'请输入您的邮箱':'请输入您的手机号'"
              :rules="[{ required: true, message: radio == '1'?'请输入您的邮箱':'请输入您的手机号' }]" :border="false">
              <template #label>
                <div class="slotCode">
                  <i v-if="radio == '1'" class="iconfont icon-youxiang_1" style="width: 0.82rem; font-size: 0.8rem;margin-top:0.15rem;" />
                  <img v-else src="../../assets/images/loginPhone.png" style="width: 12px; height: 18px;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
            </van-field>
          </li>
          <li v-if="imgcode">
            <van-field v-model.trim="form.captcha" clearable type="text" placeholder="请输入图形信息"
              :rules="[{ required: true, message: '请输入图形信息' }]">
              <template #label>
                <div class="slotCode">
                  <img src="../../assets/images/ht_bg_bgimg.png" style="width: 1rem; height: 0.875rem;" />
                  <div class="iconfont icon-advertise-next icon" style="margin-left: 8px;"></div>
                </div>
              </template>
              <template #button style="margin-left: -20px; display: flex; align-items: center;">
                <img :src="imgcode" style="width: 6.25rem; height: 1.875rem;" @click="getimgdata()" v-if="imgcode" />
              </template>
            </van-field>
          </li>
          <li v-if="is_enable == 1">
            <van-field v-model.trim="form.mobile" type="text" clearable placeholder="请输入账号"
              :rules="[{ required: true, message: '请输入账号' }]" :border="false">
              <template #label>
                <div class="slotCode">
                  <img src="../../assets/images/login_user.png" style="width: 0.95rem; height: 1rem;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
            </van-field>
          </li>
          <li class="code" v-if="is_enable == 0 && radio == 0">
            <van-field v-model.trim="form.code" clearable type="digit" placeholder="请输入短信验证码"
              :rules="[{ required: true, message: '请输入短信验证码' }]">
              <template #label>
                <div class="slotCode">
                  <img src="../../assets/images/auth_code.png" style="width: 13.5px; height: 16.5px;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
              <template #button style="margin-left: -20px;">
                <div style="font-size: 12px;" :style="'color:'+subjectColor" @click="verificationCode">{{btnText}}</div>
              </template>
            </van-field>
          </li>
          <li class="code" v-if="radio == 1">
            <van-field v-model.trim="form.code" clearable type="digit" placeholder="请输入邮箱验证码"
              :rules="[{ required: true, message: '请输入邮箱验证码' }]">
              <template #label>
                <div class="slotCode">
                  <img src="../../assets/images/auth_code.png" style="width: 13.5px; height: 16.5px;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
              <template #button style="margin-left: -20px;">
                <div style="font-size: 12px;" :style="'color:'+subjectColor" @click="verificationEmail">{{btnTextComputed}}</div>
              </template>
            </van-field>
          </li>
          <li>
            <van-field v-model.trim="form.password" clearable :type="visibleSet?'text':'password'" placeholder="请输入密码"
              :rules="[{ required: true, message: '请输入密码' }]">
              <template #label>
                <div class="slotCode">
                  <div style="width: 0.85rem;">
                    <img
                      :src="visibleSet?require('@/assets/images/view_password.png'):require('@/assets/images/no_view_password.png')"
                      :style="visibleSet?'width:0.95rem;height: 0.7rem;':'width: 0.98rem;height: 0.46rem;'"
                      @click="visibleSet=!visibleSet" />
                  </div>
                  <div class="iconfont icon-advertise-next icon" style="margin-top: 0;"></div>
                </div>
              </template>
            </van-field>
          </li>
          <li>
            <van-field v-model.trim="form.confirm_password" clearable :type="visibleSure?'text':'password'"
              placeholder="确认密码" :rules="[{ required: true, message: '确认密码' }]">
              <template #label>
                <div class="slotCode">
                  <div style="width: 0.85rem;">
                    <img
                      :src="visibleSure?require('@/assets/images/view_password.png'):require('@/assets/images/no_view_password.png')"
                      :style="visibleSure?'width:0.95rem;height: 0.7rem;':'width: 0.98rem;height: 0.46rem;'"
                      @click="visibleSure=!visibleSure" />
                  </div>
                  <div class="iconfont icon-advertise-next icon" style="margin-top: 0;"></div>
                </div>
              </template>
            </van-field>
          </li>
        </ul>
      </div>
      <div class="encrypted" v-if="is_enable == 1 && need_family">
        <div style="width: 100%; text-align: left; text-indent: 20px; font-size: 14px; color: #484848; padding: 5px 0;">
          密保问题
        </div>
        <div class="inputList">
          <van-cell-group :border="false">
            <van-field v-model="fathername" required label="父亲姓名" placeholder="请输入父亲姓名" :border="false"/>
            <van-field v-model="mothername" required label="母亲姓名" placeholder="请输入母亲姓名" :border="false"/>
          </van-cell-group>
        </div>
      </div>
      <div class="navTo">
        <div>
          <div @click="gotoUrl('login')">返回登录</div>
        </div>
        <div>
          <div @click="gotoUrl('home')">首页</div>
        </div>
      </div>
    </div>
    <!-- end -->
    <div class="foot set-pc-style">
      <van-button type="primary" :style="cssVars" :round="true" @click="findpwd">提交修改</van-button>
    </div>
  </div>
</template>

<script>
  import findpwd_controller from "./new_findpwd_controller";

  export default findpwd_controller;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
  #findpwd {

    // 新页面
    #content {
      margin: 10px;

      .area_number {
        font-size: 16px;
        color: #333;
        margin-left: -9px;

        ::v-deep .van-field__label {
          width: 4.2em;
          font-size: 16px;
        }
      }

      .top {
        background-color: white;
        border-radius: 5px;
        padding: 15px;

        .login_info {
          ::v-deep .van-field__label {
            width: 3em;
            letter-spacing: 0.5px;
          }

          ::v-deep .van-cell {
            padding-left: 3px;
          }

          li {
            /* border-bottom: solid 1px #ccc; */
            position: relative;

            input {
              width: 100%;
              border: none;
              border-bottom: solid 1px #eee;
            }

            span {
              // font-size: 14px;
              // position: absolute;
              // right: 0;
              // color: #333;
            }

            .slotCode {
              color: #00001c;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: 0.2rem;

              .icon {
                width: 0.66rem;
                height: 1.35rem;
                margin-left: 0.688rem;
              }
            }

            .img {
              width: 40px;
              overflow: hidden;

              img {
                margin-top: 26%;
                width: 48%;
              }
            }
          }

          .code {
            .van-button {
              width: 8.125rem;
            }

            .van-button__text {
              white-space: nowrap;
              color: #ffff;
            }
          }
        }
      }

      .encrypted {
        border-radius: 5px;
        margin-top: 10px;

        .inputList {
          background-color: white;
          padding: 10px 5px;
          border-radius: 5px;
          margin-top: 7px;

          ::v-deep .van-field__label {
            width: 4rem;
            font-size: 15px;
            letter-spacing: 0.5px;
          }
        }
      }

      .navTo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 1.344rem 1.281rem;
        color: #484848;
        font-size: 0.75rem;
        letter-spacing: 0.038rem;
        font-stretch: normal;
      }

      ::v-deep .van-field__label {
        font-size: 13px;
        color: #00001c;
        font-weight: 550;
        letter-spacing: 0.5px;
      }

      ::v-deep .van-cell--required::before {
        top: 13px;
        left: 5px;
      }
    }

    .foot {
      position: fixed;
      width: 100%;
      bottom: 0;
      height: 3.125rem;
      background-color: #fff;
      padding: 0.46rem 1.53rem;
      box-shadow: -0.009rem -0.125rem 0.406rem 0 rgba(213, 213, 213, 0.59);
    }

    .city-info {
      border-radius: 0.656rem;
      width: 20rem;
      height: 32rem;
      margin: 0 auto;
      // padding-bottom: 5rem;
      background: #fff;

      header {
        border-radius: 0.656rem 0.656rem 0 0;
      }

      #a_content {
        // width: 14.438rem;
        margin: 0.5rem 0.9rem;
        height: 24rem;
        overflow-y: scroll;

        ::v-deep img {
          max-width: 100%;
          display: flex;
        }
      }
    }

    ::v-deep .van-button--primary {
      height: 2.188rem;
      width: 100%;
      background-color: var(--color);
      border: 1px solid var(--color);
      border-radius: 1.094rem;
    }
  }

  ::v-deep .van-cell {
    align-items: center;
  }

  ::v-deep .van-field__control {
    font-size: 16px;
  }
</style>
